<template>
  <el-aside width="90px" default-active="1">
    <router-link class="ui"
                 v-for="(item,index) in aside"
                 :key="JSON.stringify(item) + index"
                 :to="{name:item.name,query:$route.query}">

      <img :src="`/static/images/menu/${item.menuIcon||'img-default-menu.png'}`">
      <span>{{item.title}}</span>
    </router-link>
  </el-aside>
</template>

<script>
export default {
  name: 'AsideMenu',
  props: {
    aside: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      dis: false,
      changenum: 1
    };
  },
  created() {

  },
  methods: {},
};
</script>

<style lang="less" scoped>
  .el-aside {
    background: rgba(0, 0, 0, 0.5);
    height: calc(100vh - 52px);
    padding: 15px 0;
  }


  .ui {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15px 10px 10px 10px;
    width: 80px;
    height: 80px;
    margin: 0 auto;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s;
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.05);

    & + .ui {
      margin-top: 5px;
    }

    &[aria-current="page"], &.current-page {
      background: #1D4680;

      span {
        color: #ffffff;
      }
    }

    img {
      width: 50px;
    }

    span {
      font-size: 14px;
      margin-top: 2px;
      color: #ffffff;
    }
  }
</style>>

